<template>
	<view>
		<view class="top">
			<view class="search">
				<input type="text" placeholder="搜索地址">
			</view>
		</view>
		<view class="address">
			当前地址
		</view>
		<view class="current">

			{{positionInfo.address}}
			<view @click="getCurrentLocation" style="float: right;color: #4D8175;padding-right: 20rpx;">重新定位</view>
		</view>
		<view class="address">
			被护理人地址
		</view>
		<view class="current">
			被护理人信息
		</view>
		<view v-for="(item,index) in adList" :key="index" @click="adClick(item)" style="display: flex;justify-content: space-between;
			align-items: center;background-color: white;border-top: 1upx solid rgba(0, 0, 0, 0.1);">
			<view style="color: gray;">
				<view style="margin: 20rpx;">{{item.name}} {{item.mobile }}</view>
				<view style="margin: 20rpx;">{{ item?.provinceText }}{{ item?.cityText }}{{ item?.areaText }}{{item.detailAddress}}</view>
			</view>
			<uni-icons type="right" style="margin: 20rpx;color: gray;" size="25"></uni-icons>
		</view>


		<!-- <view style="top">
			{{positionInfo.address}}
		</view> -->
		<!-- <button type="primary" @click="getCurrentLocation()">获取当前位置</button> -->
		<!-- <button type="primary" @click="getaddress()">获取选择的位置</button> -->
		<view style="padding-bottom: 20rpx;">
			<view @click="toAddAdress"
				style="background-color: #4D857B;width: 80%;height: 100rpx;background-color: #4D8175;border-radius: 50rpx;color: white;display: flex;justify-content: center;align-items: center;font-size: 40rpx;margin: auto;margin-top: 70%;"
				>
				新增地址
			</view>
		</view>
		
	</view>
</template>

<script>
	import requestHttp from '@/providers/essential/httpService.js'
	// import { VueJsonp } from 'vue-jsonp'
	export default {
		data() {
			return {
				positionInfo: {
					address: '',
					longitude: '', //经度
					latitude: '', //纬度
				},
				adList: [],
			}
		},
		onLoad(e) {
			this.getCurrentLocation()
			this.getAdList()
		},
		methods: {
			adClick(e) {
				if (e) {
					uni.setStorageSync('province',e.provinceText)
					uni.setStorageSync('city',e.cityText)
					uni.navigateBack()
				}
			},
			getAdList() {
				requestHttp.getData('/app-api/member/address/list', {}).then((res) => {
					this.adList = res.data
				})
			},
			toAddAdress() {
				uni.navigateTo({
					url: '/pages/accompany-tmp/my/addressEdit/addressEdit'
				});
			},
			// 通过自带的方法获取到当前的经纬度，调用方法获取到地址获取到地址的中文信息
			getCurrentLocation() {
				let that = this;
				uni.getLocation({
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;

						// 调用地理编码 API 获取地址信息
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							data: {
								location: `${latitude},${longitude}`,
								key: 'PTSBZ-F6DKU-ZC5VB-BMIOA-7EBB6-EXBEH'
							},
							success(res) {
								console.log(res);
								if (res.data.status === 0) {
									const addressComponent = res.data.result.address_component;
									const road = addressComponent.street_number || addressComponent
										.street;
									that.positionInfo.address = '' + road;
								}
							}
						});
					}
				});
			},
			// 获取选择地址
			getaddress() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.positionInfo.address = '选择的位置是：' + res.address
					}
				});
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	.address {
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: 100;
		padding-left: 10rpx;
	}

	.current {
		line-height: 100rpx;
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		padding-left: 10rpx;
	}

	.top {
		width: 100%;
		height: 150rpx;
		background-color: #FFFFFF;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.search {

		width: 90%;
		margin: auto;
		border: 1px solid #7FA892;
		border-radius: 50rpx;
		height: 60rpx;
		/* line-height: 100rpx; */

		/* justify-content: center; */
		/* align-items: center; */
		/* display: inline-block; */
		display: flex;
		align-items: center;
		margin-top: 50rpx;

	}

	input {
		margin-left: 50rpx;
	}
</style>